<template>
  <div class="userDate">
    <div class="box">
      <!-- 编辑按钮 -->
      <el-button type="primary" circle :icon="EditPen" @click="Alter"></el-button>
      <!-- 删除按钮 -->
      <el-button type="danger" circle :icon="Delete" @click="handleClick"></el-button>
      <!-- 分配用户按钮 -->
      <el-button type="warning" circle :icon="Setting" @click="allotUser"></el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入图标
import { EditPen, Delete, Setting } from '@element-plus/icons-vue'
// 引入状态管理
import { useCounterStoreB } from '@/stores/temporary'
// 引入删除用户接口
import { userDelete } from '@/api/userDelete'

// 获取状态管理
const storeB = useCounterStoreB()
// 定义状态
const state = ref(storeB.addState)
// 子组件调用父组件方法
const emit = defineEmits(['callParentMethod', 'tableObject'])
// 删除用户
const handleClick = async () => {
  emit('callParentMethod')
  try {
    await userDelete(storeB.rowId)
    setTimeout(() => {
      location.reload()
    }, 300)
  } catch (err) {
    console.log(err)
  }
}
// 修改用户
const Alter = () => {
  emit('tableObject')
  state.value = !state.value
  storeB.stateFun(state.value)
  storeB.titleStateFun('修改用户')
}

// 分配用户
const allotUser = async () => {
  emit('tableObject')
  state.value = !state.value
  storeB.stateFun(state.value)
  storeB.titleStateFun('分配用户')
}

// 监听状态管理
watch(
  () => storeB.addState,
  (i) => {
    state.value = i
  },
)
</script>

<style scoped lang="scss"></style>
